<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref, watch} from "vue";
import {userStore} from "../../store";

const store = userStore();
const app: any = {};
type EChartsOption = echarts.EChartsOption;

let option: EChartsOption;
let myChart: echarts.ECharts;
const chartDom = ref<HTMLDivElement>();

const initChart = () => {
    if (myChart !== undefined) {
        myChart.dispose();
    }
    myChart = echarts.init(chartDom.value as HTMLDivElement, store.isDarkMode ? 'dark' : 'light');
    option = {
        title: {
            text: 'Dynamic Data'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: categories
            },
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: 'Price',
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
        ],
        series: [
            {
                name: 'Dynamic Bar',
                type: 'line',
                xAxisIndex: 0,
                yAxisIndex: 0,
                smooth: true,
                color: '#EE6666',
                data: data
            },
        ]
    };

    app.count = 31;
    setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        data.shift();
        data.push(Math.round(Math.random() * 1000));
        categories.shift();
        categories.push(axisData);
        myChart.setOption<echarts.EChartsOption>({
            xAxis: [
                {
                    data: categories
                },
            ],
            series: [
                {
                    data: data
                },
            ]
        });
    }, 1000);

    myChart?.setOption(option);
}

onMounted(() => {
    initChart()
})

const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 30;
    while (len--) {
        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
        now = new Date(+now - 2000);
    }
    return res;
})();

const data: number[] = (function () {
    let res = [];
    let len = 30;
    while (len--) {
        res.push(Math.round(Math.random() * 1000));
    }
    return res;
})();

watch(() => [store.isDarkMode, store.isFullScreen], () => {
        initChart();
    }, {deep: true}
);

</script>

<template>
    <div ref="chartDom" style="width: 100%; height: 100%;"></div>
</template>

<style scoped lang="css">

</style>